<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
</head>
<body>
    <div id="app">
      <h3>人员信息</h3>
      <p><input type="text" placeholder="请输入需要查询的信息" v-model="keyword"></p>
      <ul>
        <li v-for="item in newPeoples" :key="item.id">
          {{item.id}}---{{item.name}}---{{item.sex>0?"女":"男"}}
        </li>
      </ul>
    </div>

<script src="../js/vue.js"></script>
    <script type="text/javascript">
      const vm=new Vue({
        el:"#app",
        data(){
          return{
            //初始数据
            persons:[
              {id:"001",name:"马冬梅",sex:1},
              {id:"002",name:"周冬雨",sex:1},
              {id:"003",name:"周杰伦",sex:0},
              {id:"004",name:"林俊杰",sex:0},
            ],
            //过滤后的数据
            filPersons:[],
            //关键字
            keyword:""
          }
        },
        //使用监视属性实现列表过滤
        //region
        // watch:{
        //   keyword:{
        //     immediate:true,
        //     handler(val){
        //         this.filPersons=this.persons.filter((p)=>{
        //          return p.name.indexOf(val)!==-1
        //         })
        //     }
        //   }
        // }
        //endRegion

        //使用计算属性实现列表过滤
        computed:{
          newPeoples(){
            return this.persons.filter((p)=>{
              return p.name.indexOf(this.keyword)!==-1
            })
          }
      }
      })
    </script>
</body>
</html>
